<template>
<view>
<view style="position:relative;" v-if="!onload">
    <view class="body">
        <view class="folders">
            <navigator v-for="(item, index) in folderList" :key="index" class="folder border row-between" :url="'/pages/mine/collect/' + (item.id ? 'detail/detail' : 'all/all') + '?id=' + item.id + '&collect=' + item.collect">
                <view class="folder-info row">
                    <image src="http://imgbdb3.bendibao.com/whbdb/202010/20/20201020134227_73259.png" class="info-icon"></image>
                    <view class="info-detail">
                        <view class="folder-name">{{item.collect}}</view>
                    </view>
                </view>
                <image src="http://imgbdb3.bendibao.com/whbdb/202010/14/20201014191606_54496.png" class="control-icon" @tap.stop="control" :data-id="item.id" :data-index="index"></image>
            </navigator>
            <navigator class="folder border row-between" url="../folder/folder?type=new">
                <view class="folder-info row">
                    <image src="http://imgbdb3.bendibao.com/whbdb/202010/14/20201014151929_59952.png" class="info-icon"></image>
                    <view class="info-detail">
                        <view class="folder-name">创建收藏夹</view>
                    </view>
                </view>
            </navigator>
        </view>
        <view class="new-folder"></view>
    </view>
    <view class="black" v-if="showCot" @tap="cancel"></view>
    <view class="control" v-if="showCot">
        <view style="padding: 60rpx 40rpx 0 40rpx;">
            <view class="head">
                <view class="folder-info row">
                    <image src="http://imgbdb3.bendibao.com/whbdb/202010/20/20201020134227_73259.png" class="info-icon"></image>
                    <view class="info-detail">
                        <view class="folder-name">{{folderList[index].collect}}</view>
                    </view>
                </view>
            </view>
            <view class="cot-list">
                <navigator class="cot-item" v-if="id && id != '9'" :url="'../folder/folder?type=rename&type_id=' + id">
                    <image src="http://imgbdb3.bendibao.com/whbdb/202010/14/20201014191312_87275.png" class="cot-icon"></image>
                    <view class="cot-name">重选名</view>
                </navigator>
                <button class="cot-item" open-type="share">
                    <image src="http://imgbdb3.bendibao.com/whbdb/202010/14/20201014191400_59808.png" class="cot-icon"></image>
                    <view class="cot-name">分享</view>
                </button>
                <view class="cot-item" v-if="id && id != '9'" @tap="delete">
                    <image src="http://imgbdb3.bendibao.com/whbdb/202010/14/20201014191206_12451.png" class="cot-icon"></image>
                    <view class="cot-name">删除收藏夹</view>
                </view>
            </view>
        </view>
        <view class="cancel" @tap="cancel">取消</view>
    </view>
</view>

<image src="http://imgbdb3.bendibao.com/whbdb/202010/20/20201020133412_40556.jpg" mode="widthFix" style="width: 100%;" v-if="onload"></image>
</view>
</template>

<script>
const app = getApp();
import util from "../../../../utils/util";

export default {
  data() {
    return {
      showCot: false,
      folderList: [],
      id: "",
      index: "",
      onload: true
    };
  },

  components: {},
  props: {},
  onLoad: function () {
    // 监听页面加载的生命周期函数
    util.getUrl(app.globalData.url);
  },

  onShow() {
    this.getUserFilders();
    this.setData({
      showCot: false,
      onload: true
    });
  },

  onShareAppMessage(e) {
    if (e.from == "button") return {
      title: this.folderList[this.index].name,
      content: "这是我收纳好的文章资讯，邀请你一起来本地宝办事查询",
      imageUrl: this.folderList[this.index].img,
      path: `/pages/mine/collect/share/share?user=${encodeURIComponent(this.user)}`
    };
  },

  methods: {
    // 获取用户全部收藏夹
    getUserFilders() {
      util.request("user.php", {
        action: "collect",
        option: "collect_list",
        user_id: uni.getStorageSync("user_id"),
        openid: uni.getStorageSync("openid")
      }, "POST").then(res => {
        if (res.data.message == "success") {
          this.setData({
            folderList: res.data.data,
            onload: false
          });
        }
      });
    },

    cancel() {
      this.setData({
        showCot: false
      });
    },

    control(e) {
      let id = e.currentTarget.dataset.id;
      let index = e.currentTarget.dataset.index;
      this.setData({
        showCot: true,
        id: id,
        index
      });
      util.request("share.php", {
        action: "user_encode",
        type_id: this.id,
        user_id: uni.getStorageSync("user_id"),
        openid: uni.getStorageSync("openid")
      }, "POST").then(res => this.user = res.data.data.user);
    },

    delete() {
      uni.showModal({
        title: '温馨提示',
        content: '确认删除收藏夹？',
        showCancel: true,
        cancelText: '取消',
        cancelColor: '#000000',
        confirmText: '确定',
        confirmColor: '#3CC51F',
        success: result => {
          if (result.confirm) {
            util.request("user.php", {
              action: "collect",
              option: "del_dir",
              type_id: this.id,
              user_id: uni.getStorageSync("user_id"),
              openid: uni.getStorageSync("openid")
            }, "POST").then(res => {
              this.setData({
                showCot: false
              }, () => {
                this.onShow();
              });
            });
          }
        }
      });
    }

  }
};
</script>
<style>
button {
    margin: 0;
    padding: 0;
    background-color: transparent;
    line-height: normal;
}

.body {
    padding: 0 40rpx;
    padding-top: 38rpx;
    font-size: 30rpx;
    color: #141414;
}

.border {
    margin-bottom: 26rpx;
}

.info-icon {
    width: 150rpx;
    height: 118rpx;
    margin-right: 34rpx;
}

.control-icon {
    width: 5rpx;
    height: 32rpx;
    padding: 20rpx;
}

.folder-num {
    margin-top: 4rpx;
    font-size: 24rpx;
    color: #9F9F9F;
}

.control {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 554rpx;
    border-radius: 74rpx 74rpx 0 0;
    box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.16);
    background-color: rgb(246, 246, 246);
    box-sizing: border-box;
    z-index: 2;
}

.control .folder-info {
    padding-bottom: 37rpx;
    margin-bottom: 37rpx;
    border-bottom: 2rpx solid #EBEBEB;
}

.cot-list {
    display: flex;
    align-items: center;
}

.cot-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 54rpx;
}

.cot-icon {
    width: 94rpx;
    height: 94rpx;
    margin-bottom: 10rpx;
}

.cot-name {
    font-size: 24rpx;
    color: #141414;
    font-weight: 500;
}

.cancel {
    margin-top: 58rpx;
    font-size: 30rpx;
    font-weight: 500;
    line-height: 104rpx;
    text-align: center;
    background-color: #FFFFFF;
}

.black {
    position: fixed;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    background-color: #000000;
    opacity: .38;
}
</style>